<template>
  <div>
    <van-nav-bar title="生成订单" left-text="" left-arrow @click-left="$router.back()">
      <template #right>
        <span class="threeTip">...</span>
      </template>
    </van-nav-bar>
    <div style="border-bottom:1px dashed #ddd" @click="$router.push('/address')">
      <div>{{ defaultAddress.name }} {{ defaultAddress.tel }}</div>
      <div>{{ defaultAddress.address }}</div>
    </div>
    <van-card v-for="item in payList" :key="item" :num="item.goodsCount" :price="item.sellingPrice"
      :title="item.goodsName" :thumb="item.goodsCoverImg" />

    <div>
      <button @click="createOrder">生成订单</button>
    </div>
    <van-action-sheet v-model="show" title="请选择支付方式">
      <van-button type="primary" block @click="pay(1)">支付宝</van-button>
      <van-button type="primary" block @click="pay(2)" color="linear-gradient(to right, #ff6034, #ee0a24)">微信
      </van-button>
    </van-action-sheet>

  </div>
</template>
<script>
  // @ is an alias to /src
  import {
    mapState
  } from 'vuex'
  // import { saveOrder, paySuccess } from '@/api/index'
  export default {
    name: 'XXX',
    methods: {
      pay(payType) {
        // 调用 paySuccess接口
        paySuccess({
          orderNo: this.orderNo,
          payType
        }).then(data => {
          // 成功之后跳转历史订单页面
          alert('跳转历史订单页')
        })
      },
      createOrder() {
        // 调用弹框
        this.show = true
        // 调用接口
        saveOrder({
          addressId: this.defaultAddress.id, // 地址id
          cartItemIds: this.payList.map(item => item.cartItemId)
        }).then(data => {
          // data.data 是订单号码
          this.orderNo = data.data;
        })
      }
    },
    data() {
      return {
        show: false,
        orderNo: ''
      }
    },
    computed: {
      ...mapState({
        payList: 'payList',
        defaultAddress() {
          let obj = this.$store.state.defaultAddress
          if (obj.addressId) {
            return {
              id: obj.addressId,
              address: `${obj.provinceName} ${obj.cityName} ${obj.regionName} ${obj.detailAddress}`,
              name: obj.userName,
              tel: obj.userPhone
            }
          } else if (obj.id) {
            return obj
          }
        }
      })
    },
    created() {
      console.log(this.$store.state.defaultAddress) // 获取选择的地址
      // 使用地址信息的时候 我们要区分 数据是后台给的那个还是组件给的那个？
      /* 
        if(this.$store.state.defaultAddress.addressId){
          后台给的
        }else if (this.$store.state.defaultAddress.id){
          组件给的
        }
      */
      // 还得获取选择的 要付钱的购物车数据
      console.log(this.$store.state.payList)
    }
  }
</script>
<style lang="less">
</style>